<script setup lang="ts">
import { ref } from 'vue'

// 定义props
const props = defineProps<{
  title: string
  defaultExpanded?: boolean
}>()

// 折叠状态
const isExpanded = ref(props.defaultExpanded || false)

// 折叠内容切换
const toggleExpanded = () => {
  isExpanded.value = !isExpanded.value
}
</script>

<template>
  <div class="border border-gray-200 rounded-lg shadow mb-6">
    <div 
      class="bg-gray-50 p-4 flex justify-between items-center cursor-pointer"
      @click="toggleExpanded"
    >
      <h2 class="text-xl font-semibold text-gray-800">{{ title }}</h2>
      <span class="text-gray-500">{{ isExpanded ? '▼' : '▶' }}</span>
    </div>
    
    <div v-if="isExpanded" class="p-4 bg-white text-left">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
/* 折叠内容的过渡动画 */
.fixed-content-enter-active,
.fixed-content-leave-active {
  transition: all 0.3s ease;
}

.fixed-content-enter-from,
.fixed-content-leave-to {
  opacity: 0;
  max-height: 0;
}
</style>